<template>
    <div class="flex-fill">
        <div class="v-container">
            <div class="video-detail__layout">
                <div class="left">
                    <div id="player" class="player">
                        <video :src="video.videoUrl" controls></video>
                    </div>
                    <div class="v-card options">
                        <div class="options-top">
                            <div class="status" v-if="video.status === 0">
                                <i class="iconfont icon-shenhezhong"></i>
                                <span>待审核</span>
                            </div>
                            <div class="status" v-if="video.status === 1">
                                <i class="iconfont icon-wancheng"></i>
                                <span>已通过</span>
                            </div>
                            <div class="status" v-if="video.status === 2">
                                <i class="iconfont icon-shibai"></i>
                                <span>未通过</span>
                            </div>
                            <div class="items">
                                <el-button type="success" plain class="options-item pass" @click="updateVideoStatus(1)">
                                    <el-icon v-if="isMiniWidth"><Select /></el-icon>
                                    <span v-else>通过审核</span>
                                </el-button>
                                <el-button type="warning" plain class="options-item no-pass"
                                    @click="updateVideoStatus(2)">
                                    <el-icon v-if="isMiniWidth">
                                        <CloseBold />
                                    </el-icon>
                                    <span v-else>不予过审</span>
                                </el-button>
                                <!-- <el-button type="danger" plain class="options-item ban" @click="beforeDelete">
                                    <el-icon v-if="isMiniWidth">
                                        <Delete />
                                    </el-icon>
                                    <span v-else>永久删除</span>
                                </el-button> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail">
                    <div class="v-card detail-card">
                        <div class="detail-item">
                            <div class="item-title">标题</div>
                            <div class="item-content">{{ video.title }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="item-title">分区</div>
                            <div class="item-content">
                                {{ category.mcName }}
                                <!-- &nbsp;→&nbsp; {{ category.scName }} -->
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="item-title">标签</div>
                            <div class="item-content">
                                <div class="tag-container" v-for="(item, index) in tags" :key="index">
                                    {{ item }}
                                </div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="item-title">简介</div>
                            <div class="item-content"><span class="v-text descr"
                                    v-html="linkify(video.description)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { linkify } from '@/utils/utils.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getVideoDetail, updateStatus } from '@/api/video';
import { useUserStore } from '@/store/user';



const route = useRoute();
const router = useRouter();
const store = useStore();
const userStore = useUserStore();

const video = ref({}); // 视频信息
const user = ref({}); // 投稿用户信息
const category = ref({}); // 视频分区信息
const tags = ref([]); // 投稿标签
const isMiniWidth = ref(false); // 判断是否小窗

// 获取视频详细信息
const getVideoInfo = async () => {
    // console.log("当前视频" + route.params.vid);
    getVideoDetail(route.params.vid).then(res => {
        if (res.code == 1) {
            // console.log("信息：" + res.data);
            video.value = res.data.video;
            user.value = res.data.user;
            category.value = res.data.category;
            tags.value = res.data.video.tags.split("\r\n").filter(tag => tag.trim() !== "");
        }
    })
};

// 更新视频状态
const updateVideoStatus = async (status) => {
    userStore.isLoading = true;
    // store.state.isLoading = true;
    // const formData = new FormData();
    // formData.append('vid', route.params.vid);
    // formData.append('status', status);
    // console.log("修改信息：" + route.params.vid);
    // console.log("修改信息：" + status);
    updateStatus(route.params.vid, status).then(res=>{
        if (res.code == 1) {
            router.push('/audit/video/form');
            // store.state.isLoading = false;
            userStore.isLoading = false;
        } else {
            getVideoInfo();
            // store.state.isLoading = false;
            userStore.isLoading = false;
        }
    })
}

// 更新视频播放器高度
const updatePlayerHeight = () => {
    const playerElement = document.getElementById('player');
    if (playerElement) {
        const playerWidth = playerElement.offsetWidth;
        const playerHeight = playerWidth * (9 / 16);
        playerElement.style.height = `${playerHeight}px`;
    }
};

// 判断是否小窗
const changeWidth = () => {
    if (window.innerWidth < 480) {
        isMiniWidth.value = true;
    } else {
        isMiniWidth.value = false;
    }
}


// 取消上传前的最后通牒
const beforeDelete = () => {
    ElMessageBox.confirm(
        '该操作会删除视频源文件，无法复原，确定删除吗？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            updateVideoStatus(3);
        })
        .catch(() => { })
}


onMounted(() => {
    changeWidth();
    getVideoInfo();
    updatePlayerHeight();
    window.addEventListener('resize', updatePlayerHeight);
    window.addEventListener('resize', changeWidth);
});

onUnmounted(() => {
    window.removeEventListener('resize', updatePlayerHeight);
    window.removeEventListener('resize', changeWidth);
})
</script>

<style scoped>
.v-container {
    position: relative;
}

.video-detail__layout {
    position: relative;
    width: 100%;
    display: flex;
}

.left {
    width: 66%;
    max-width: 672px;
}

.player {
    box-shadow: 2px 2px 10px #0000003f;
    background-color: black;
    width: 100%;
}

.player video {
    width: 100%;
    height: 100%;
}

.options {
    margin-top: 16px;
}

.options-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 16px;
}

.status {
    display: flex;
    align-items: center;
}

.status .iconfont {
    font-size: 12px;
    margin-right: 5px;
}

.icon-shenhezhong {
    color: var(--pay_yellow);
}

.icon-wancheng {
    color: var(--success_green);
}

.icon-shibai {
    color: var(--stress_red);
}

.options-item {
    padding: 0 10px;
}

.detail {
    flex: 1;
    margin: 0 0 0 16px;
    min-width: 400px;
    color: var(--text2);
}

.detail-card {
    padding: 0 16px 30px 20px;
}

.detail-item {
    display: flex;
    margin-top: 20px;
    min-height: 25px;
}

.item-title {
    flex: 0 0 auto;
    width: 70px;
    color: var(--text1);
    font-size: 16px;
    font-weight: 600;
}

.item-content {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.type {
    flex: 0 0 auto;
    width: 45px;
}

.icon-jinzhi {
    font-size: 14px;
    color: var(--stress_red);
    margin-right: 4px;
}

.tag-container {
    text-align: center;
    padding: 0 12px;
    margin: 0px 12px 12px 0;
    height: 25px;
    border-radius: 14px;
    background: #f1f2f3;
    font-size: 12px;
    line-height: 25px;
    border: none;
}

.descr {
    width: 100%;
    padding: 10px;
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .video-detail__layout {
        flex-direction: column;
    }

    .left {
        width: auto;
    }

    .detail {
        margin: 16px 0 0 0;
        min-width: auto;
    }

    .item-title {
        width: 50px;
    }
}

@media (min-width: 700.1px) and (max-width: 800px) {
    .detail {
        min-width: 300px;
    }

    .item-title {
        width: 50px;
    }
}
</style>